let userPhone = document.querySelector('.userPhone');
let loginnn = document.querySelector('.loginnn');
let dialoggg = document.querySelector('.dialoggg');
let out = document.querySelector('.out');


loginnn.onclick = function () {

    location.href = '../html/login-dialog.html';
};
dialoggg.onclick = function () {

    location.href = '../html/login-dialog.html';
};

out.onclick = function () {

    setCookie('user', -1);
    location.reload();
};

let user = getCookie('user');
console.log(user)
if(!user){
    loginnn.style.display = 'block';
    dialoggg.style.display = 'block';
    userPhone.style.display = 'none';
    out.style.display = 'none';
}else{
    loginnn.style.display = 'none';
    dialoggg.style.display = 'none';
    userPhone.style.display = 'block';
    out.style.display = 'block';
};


// let nav = document.querySelector('.nav');
// nav.onclick = function (e) {
//     e = event || window.event;
//     if (e.target.classList.contains('index')) {
//         location.href = '../html/index.html'
//     };
//     if (e.target.classList.contains('design')) {
//         location.href = '../html/lists.html'
//     };
//     if (e.target.classList.contains('designer')) {
//         location.href = '../html/users.html'
//     };
// };

// 获取左边主体元素
let leftMain = document.querySelector('.leftMain');
let headline = document.querySelector('.headline');
let banners = document.querySelector('.banners');
let description = document.querySelector('.description');
let work_desc = document.querySelector('.work_desc');
let work_exhibition = document.querySelector('.work_exhibition');
let predict = document.querySelector('.predict');
let expandServices = document.querySelector('.expandServices');
let urgentServices = document.querySelector('.urgentServices');

let service_price = document.querySelector('.service_price');
let evaluate = document.querySelector('.evaluate');
let expand_service = document.querySelector('.expand_service');
let urgent_service = document.querySelector('.urgent_service');

let author = document.querySelector('.author');

// 获取右边主题元素
let rightMain = document.querySelector('.rightMain');



/* 
    - 获取用户页传递过来的参数 location.search
    - 利用字符串的方法 split ，以 = 号分割参数
    - 取索引为1的值，即取id值
*/
let listsId = location.search;
let listsIdArr = listsId.split('=');
let resId = listsIdArr[1];
console.log(resId);


// 获取详情页数据
listsDetails()
async function listsDetails() {

    let res = await pAjax({

        url: `https://muse.huaban.com/api/v2/services/${resId}`
    })

    console.log(JSON.parse(res));

    // 渲染详情页
    renderListsDetail(JSON.parse(res));
};

// 渲染列表详情页数据的函数
function renderListsDetail(data) {

    let lStr1 = `<div class="nav_classfy">
                    <a href="#">设计服务</a>
                    <i>》</i>
                    <span>${data.name}</span>
                </div>
                <div class="title">${data.name}</div>`;

    headline.innerHTML = lStr1;

    let lStr2 = `<a href="https://muse-img.huabanimg.com/${data.cover[0].key}" title="" target="_black">
                    <img src="https://muse-img.huabanimg.com/${data.cover[0].key}_/fw/880" alt="">
                </a>`;

    banners.innerHTML = lStr2;

    let lStr3 = data.desc.map(item => {

        if (item.text) {
            return `<p>${item.text}</p>`;
        };
        // 有些数据的desc的第一个数据是不含image这个属性的，所以要做一个判断，只有存在这个属性的才进行下面的代码
        if (item.image) {
            return `<div class="work">
                    <a href="https://muse-img.huabanimg.com/${item.image.key}" target="_black">
                        <img src="https://muse-img.huabanimg.com/${item.image.key}_/fw/820" alt="">
                    </a>
                </div>`
        };
    }).join('');

    work_exhibition.innerHTML = lStr3;


    let lStr4 = `<h3>预估完成时间</h3>
                <p>${data.complete_in.number}${data.complete_in.unit=='day'?'天':'周'}</p>`;

    predict.innerHTML = lStr4;

    // 第一种情况：只有加急服务
    if (data.extra.urgent && data.extra.sub_services.length == 0) {

        let lStr5 = `<h3>加急服务</h3>
                        <div class="urgentSelect">
                            <label id="">
                                <input type="checkbox">
                                <span>加急服务，${data.extra.urgent.number}天完成</span>
                            </label>
                            <i>￥${data.extra.urgent.price}</i>
                        </div>`;

        let rStr3 = `<div class="urgent_text">
                        <span>加急服务</span>
                        <i>?</i>
                    </div>
                    <div class="urgent_select">
                        <label id="">
                            <input type="checkbox">
                            <span>加急服务，${data.extra.urgent.number}${data.extra.urgent.unit=='day'?'天':'周'}完成</span>
                        </label>
                        <i>￥${data.extra.urgent.price}</i>
                    </div>`;

        urgentServices.innerHTML = lStr5;
        urgent_service.innerHTML = rStr3;
    };

    // 第二种情况，只有拓展服务
    if (!data.extra.urgent && data.extra.sub_services.length != 0) {

        let lStr6 = data.extra.sub_services.map(item => {

            return `<div class="expandSelect">
                        <label id="">
                            <input type="checkbox">
                            <span>${item.name}</span>
                        </label>
                            <i>￥${item.price}</i>
                    </div>`;
        }).join('');

        let rStr4 = data.extra.sub_services.map(item => {

            return `<div class="expand_select">
                        <label id="">
                            <input type="checkbox">
                            <span>${item.name}</span>
                        </label>
                        <i>￥${item.price}</i>
                    </div>`;
        }).join('');

        expandServices.innerHTML = '<h3>拓展服务</h3>' + lStr6;
        expand_service.innerHTML = '<div class="expand_text"><span>拓展服务</span><i>?</i></div>' + rStr4;
    };

    // 第三种情况，既没有加急服务，也没有拓展服务
    if (!data.extra.urgent && data.extra.sub_services.length == 0) {
        let lStr7 = '';
        urgentServices.innerHTML = lStr7;
        expandServices.innerHTML = lStr7;


        let rStr5 = '';
        urgent_service.innerHTML = rStr5;
        expand_service.innerHTML = rStr5;
    };

    // 第四种情况，既有拓展服务，也有加急服务
    if (data.extra.urgent && data.extra.sub_services.length != 0) {

        let lStr8 = data.extra.sub_services.map(item => {

            return `<h3>拓展服务</h3>
                    <div class="expandSelect">
                        <label id="">
                            <input type="checkbox">
                            <span>${item.name}</span>
                        </label>
                            <i>￥${item.price}</i>
                    </div>`;
        }).join('');

        let lStr9 = `<h3>加急服务</h3>
                    <div class="urgentSelect">
                        <label id="">
                            <input type="checkbox">
                            <span>加急服务，${data.extra.urgent.number}天完成</span>
                        </label>
                        <i>￥${data.extra.urgent.price}</i>
                    </div>`;

        let rStr6 = `<div class="urgent_text">
                        <span>加急服务</span>
                        <i>?</i>
                    </div>
                    <div class="urgent_select">
                        <label id="">
                            <input type="checkbox">
                            <span>加急服务，${data.extra.urgent.number}${data.extra.urgent.unit=='day'?'天':'周'}完成</span>
                        </label>
                        <i>￥${data.extra.urgent.price}</i>
                    </div>`;

        let rStr7 = data.extra.sub_services.map(item => {

            return `<div class="expand_select">
                        <label id="">
                            <input type="checkbox">
                            <span>${item.name}</span>
                        </label>
                        <i>￥${item.price}</i>
                    </div>`;
        }).join('');

        expandServices.innerHTML = lStr8;
        urgentServices.innerHTML = lStr9;

        urgent_service.innerHTML = rStr6;
        expand_service.innerHTML = '<div class="expand_text"><span>拓展服务</span><i>?</i></div>' + rStr7;
    };


    function renderStars(a) {

        let starStr;

        if (a.rating) {

            let stars = Math.round(a.rating);

            switch (stars) {

                case (5):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i></span>`;
                    break;
                case (4):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i></span>`;
                    break;
                case (3):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                    break;
                case (2):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i><i>★</i></span>`;
                    break;
                case (1):
                    starStr = `<span><i class="lighten">★</i><i>★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                    break;
                case (0):
                    starStr = `<span><i>★</i><i>★</i><i>★</i><i>★</i><i>★</i></span>`;
                    break;
            }
        } else {
            starStr = '';
        }

        return starStr;
    };

    let resStarStr = renderStars(data);

    let rStr1 = `<p>${data.price == 0?'价格面议':data.price+'/'+data.unit}</p>
                <div class="service_more">
                    <span>基础服务价格</span>
                    <a href="#">了解更多</a>
                </div>`;
    service_price.innerHTML = rStr1;

    let rStr2 = `<div class="evaluate_num">
                    <span>成交</span>
                    <span>${data.order_count}</span>
                </div>
                <div class="evaluate_stars">
                    <span>评价</span>${resStarStr}
                </div>`;
    evaluate.innerHTML = rStr2;


    // 时分秒
    let d = parseInt(data.user.extra.response_time / (60 * 60 * 24));
    let h = parseInt((data.user.extra.response_time / (60 * 60)) - d * 24);
    let m = parseInt((data.user.extra.response_time / 60) - d * 24 * 60 - h * 60);
    let s = data.user.extra.response_time - d * 24 * 60 * 60 - h * 60 * 60 - m * 60;

    let rStr8 = `<div class="author_up">
                    <a href="#" data_id='${data.user_id}' class='dataid'>
                        <img src="https://hbimg.huabanimg.com/${data.user.avatar.key}_/both/70x70"
                            alt="">
                    </a>
                    <div class="name_communicate">
                        <span data_id='${data.user_id}' class='dataid'>${data.user.username}</span>
                        <i></i>
                    </div>
                </div>
                <div class="divider"></div>
                <div class="author_mid">
                    <div class="time_authentication">
                        <div class="time">
                            <div class="time_left">
                                <i class="i1"></i>
                                <span>平均响应时间</span>
                            </div>
                            <div class="time_right">
                                <span>${d}天${h}时${m}分${s}秒</span>
                            </div>
                        </div>
                        <div class="authentication">
                            <div class="authentication_left">
                                <i class="i2"></i>
                                <span>实名认证</span>
                            </div>
                            <div class="authentication_right">
                                <span>已认证</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider"></div>
                <div class="author_down">
                    <p>${data.user.desc}</p>
                </div>`;

    author.innerHTML = rStr8;

    skip();
};


// 点击 用户头像 或 名字 跳转到用户详情页
function skip() {

    let gotodetails = document.querySelectorAll('.dataid');
    console.log(gotodetails);

    for (let i = 0; i < gotodetails.length; i++) {

        gotodetails[i].onclick = function () {

            // 获取用户的id
            let id = this.getAttribute('data_id');

            // 点击跳转到用户详情页，并把id传递到参数
            location.href = `users_details.html?id=${id}`;
        };
    };
};